<template>
  <header>
    <Row type="flex" justify="space-between">
      <Row type="flex" justify="start">
        <Icon type="md-contact" color="#ccc" size="70"/>
        <div class="home-user">
          <span v-if="this.tepee === '1'">{{account.userName}}，欢迎进入管理中心！</span>
          <span v-if="this.tepee === '2'">{{agent.agentName}}，欢迎进入管理中心！</span>
          <span>上次登录：{{loginDate}}</span>
          <!--            <span>上次登录：2019年7月10日 星期三 20:30:23</span>-->
        </div>
      </Row>
      <Row type="flex" class="user-device-box flex-wrap">
        <div v-if="this.tepee === '1'">
          <Row type="flex" class="user-device-box flex-wrap">
            <div :class="item.class" v-for="item in bloc.totalArr" :key="item.name" >
              <div>
                <label style="font-size: large">{{item.name}}</label>
                <div>{{item.number}}</div>
              </div>
            </div>
          </Row>
        </div>
        <div v-if="this.tepee === '2'">
          <Row type="flex" class="user-device-box flex-wrap">
            <div :class="item.class" v-for="item in bloc.totalArr" :key="item.name" >
              <div v-if="item.name !== '经销商数量'">
                <label style="font-size: large">{{item.name}}</label>
                <div>{{item.number}}</div>
              </div>
            </div>
          </Row>
        </div>
      </Row>
    </Row>
  </header>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import {ListHeaderBloc} from '@/view/home/ListHeaderBloc';
  import {Route} from 'vue-router';
  import {store} from '@/store/Store';
  import {formatDate} from '@/base/util/Dates';
  import {isEmpty} from '@/base/util/Strings';

  @Component
  export default class extends Vue {
    bloc: ListHeaderBloc = new ListHeaderBloc();

    get account() {
      return store.state.user.account
    }
    get agent() {
      return store.state.user.agent
    }
    get tepee() {
      return store.state.user.tepee
    }

    get loginDate() {
      if (this.tepee === '1') {
          return isEmpty(this.account.lastDate)
              ? formatDate(new Date(this.account.loginDate), 'yyyy-MM-dd hh:mm:ss')
              : formatDate(new Date(this.account.lastDate), 'yyyy-MM-dd hh:mm:ss')
      } else {
          return isEmpty(this.agent.lastDate)
              ? formatDate(new Date(this.agent.loginDate), 'yyyy-MM-dd hh:mm:ss')
              : formatDate(new Date(this.agent.lastDate), 'yyyy-MM-dd hh:mm:ss')
      }
    }

    mounted() {
      this.bloc.load();
    }
  }
</script>

<style lang="less" scoped>
  .user-device-box > div {
    padding: 0 20px;
    & > div {
      font-size: 28px;
      font-weight: 500;
    }
    & > label {
      font-size: 14px;
      display: block;
      text-align: right;
    }
  }

  .home-user {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 15px;
    color: #999;
    font-size: 14px;

    span {
      padding: 5px 0;
    }
  }
  .b-right {
    border-right: 1px solid #e4e4e4;
  }
</style>
